<template>
<div>
  <div class="inspectDetail-content">
          <div class="inspectDetailBox">
               <div class="header">漳州市和平镇卫生医院</div>
                <div class="txt1"><span>医疗卫生</span> <div class="line"></div><span>定级医疗机构</span></div>
                <div class="tableBox">
                            <div class="tr soildTop per100 display-fx-center">
                              <div class="td">
                                    <span>统一信用代码</span>
                              </div>
                              <div class="full">34234234234234234324234242342</div>
                          </div>
                </div>
                <div class="tableBox">
                            <div class="tr display-fx-center">
                              <div class="td">
                                    <span>所在镇</span>
                              </div>
                              <div class="full" style="border-right:none">和平镇</div>
                          </div>
              
                          <div class="tr display-fx-center">
                                <div class="td">
                                    <span>联系电话</span>
                                </div>
                                <div class="full">13000000000</div>
                          </div>
                </div>
                <div class="tableBox">
                            <div class="tr per100 display-fx-center">
                              <div class="td">
                                    <span>详细地址</span>
                              </div>
                              <div class="full">和平镇</div>
                          </div>
                </div>

                <div class="headerBox">
                      <div class="line"></div>
                      <div class="title">检查视频</div>
                </div>
                <div class="videoContentCss">
                  <video controls class="videoCss">
                    <source :src="mp4Url" type="video/mp4">
                  </video>
                  <el-button type="primary" class="videoBtnCss">对讲</el-button>
                </div>

                 <div>  
                      <div class="headerBox">
                            <div class="line"></div>
                            <div class="title">检查内容</div>
                      </div>
                      
                      <div class="examineBox" v-for="(item,index) in examineList" :key="index + 's'">
                            <div class="title" :class="{active:index == 1}">{{item.title}}</div>
                            <div class="tr" v-for="(it,i) in item.list" :key="i + 'y'">
                                  <div class="td">1、执业许可证管理符合要求</div>
                                  <div class=""></div>
                            </div>
                      </div>

                      <div class="headerBox">
                            <div class="line"></div>
                            <div class="title">检查情况</div>
                      </div>
                      
                        <div class="contentBox">  
                            <div>这是检查情况的内容嘞~</div>
                       </div>
                 </div>
          </div>
          
  </div>
      <div class="footer-btn">
              <el-button class="btn" @click="goBackBtn">返回</el-button>
      </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
         input:'111111111111',
         examineList:[{title:'（一）医疗机构资源',list:[{},{},{}]},{title:'（一）医疗机构资源',list:[{},{},{}]}],
         textarea:'',
         type:''
      };
    },
    created() {
         this.type=this.$route.query.type 
    },
    methods: {
        goBackBtn(){
          this.$router.back()
        },
    }
  };
</script>
<style lang="scss" scoped>
         .display-fx-center{
             display: flex;
             align-items: center;
         }
         .per100{
             width: 100%!important;
         }
         .soildTop{
             border-top:solid 1px  #D3D8E2;
         }
         .inspectDetail-content{
              overflow-y: scroll;
              position: relative;
              background-color: #fff;
              padding: 40px 20px;
              border-radius: 10px;
              height: calc( 100vh - 66px - 128px);
              // display: flex;
              // flex-direction: column;
             .inspectDetailBox{
                    max-width: 930px;
                    margin: 0 auto;
                    padding-bottom:40px;

              }
            .header{
                 font-size: 22px;
                 font-weight: bold; 
                 color: #484848;
                 text-align: center;
            }
            .txt1{
                 font-size: 12px;
                 color: #797C84;
                 @extend .display-fx-center;
                 justify-content: center;
                 margin: 20px 0;
                 .line{
                      border-left: solid 1px #797C84; 
                      height: 12px;
                      margin: 0 6px 0 6px;
                      position: relative;
                      top: 1px;
                   }
                }
            .tableBox{
                  font-size: 14px;
                  @extend .display-fx-center;
                  .tr{
                      width: 50%;
                      height: 50px;
                      display: flex;
                      line-height: 50px;
                      .td{
                       width: 120px;
                       height: 100%;
                       border: solid 1px #D3D8E2;
                       background: #F4F8FF;
                       padding: 0 8px;
                       border-top:none;
                       border-right:none;
                       color: #797C84;
                       flex-shrink: 0;         
                   }
                   .full{
                         width: 100%;
                         height: 100%;
                         line-height: 50px;
                         border: solid 1px #D3D8E2;
                         border-top:none;  
                         padding: 0 10px;             
                      }
                  } 
    
            }
           .headerBox{
                font-size: 16px;
                color: #484848;
                font-weight: bold;
                margin-top:40px;
                margin-bottom:15px;
                @extend .display-fx-center;
                .line{
                  width: 4px;
                  height: 12px;
                  background: #5D85FF;
                  border-radius: 6px 6px 6px 6px;
                  margin-right:6px;
                }
             }
              .videoContentCss{
                  margin-top: 20px;
                  text-align: center;
                  position: relative;
                  .videoCss{
                    width: 100%;
                    // height: 492px;
                  }
                  .videoBtnCss{
                    transform: translate( calc( -100% - 10px) , calc( -100% - 40px) );
                    bottom: 0;
                    position: absolute;
                  }
                }
             .examineBox{         
                  .title{
                      font-weight: bold;
                      font-size: 14px;
                      color: #484848;
                      line-height: 38px;
                      height: 38px;
                      border: 1px solid #D3D8E2;
                      background: #F4F8FF;
                      padding: 0 10px;
                   }
                   .tr{
                      display: flex;
                      line-height: 38px;
                      color: #797C84;
                      font-size: 14px;
                      border: 1px solid #D3D8E2;
                      border-top:none;
                      .td{
                          width: 820px;
                          border-right:1px solid #D3D8E2;
                          padding: 0 10px;
                      }
                   }
                   .active{
                         border-top:none!important;
                   }
                  
             }
          }
          .contentBox{
               border: solid 1px #D3D8E2;
               font-size: 14px;
               color:#797C84;
               padding: 10px;
               min-height: 210px;
          }
          .footer-btn{
                 width: 100%;
                 background: #FFFFFF;
                 height: 78px;
                 position: fixed;
                 bottom: 0;
                 right: 0;
                .btn{
                   position: fixed;
                   bottom: 20px;
                   right: 20px;    
                }
          }
        ::v-deep{
           .el-input__inner{
                height: 30px;
                line-height: 30px;
           }
           .el-radio{
              margin-right:20px;
           }
           .el-textarea__inner{
                background: #F7F8FA;
                border-radius:4px!important;
                border: none!important;
                height: 187px!important;
           }
        }
</style>
